<template>
  <page-header class="mt-18px mb-15px" :count="count" :title="title" :menuId="menuId" is-small />

  <vc-table
    :loading="loading"
    :tableData="tableData"
    :columns="columns"
    :total="totalNum"
    :pageSize="queryData.pageSize"
    v-model:pageNum="queryData.pageNum"
    :defaultSort="{ field: '300211', order: 'desc' }"
    @page-change="handleCurrentChange"
    @sort-change="sortChange"
  />
</template>

<script setup lang="ts">
import pageHeader from '@/views/modules/enterprise/components/page-header.vue';
import { useTable } from './useTable';
import { type EnvironmentalInsuranceF9Params, getEnvironmentalInsuranceF9 } from '../../../../apis';
import { usePage } from '@/use/usePage';
import { useF9Context } from '@/views/modules/enterprise/use/use-context';

interface Props {
  title: string;
  menuId: string;
  count?: number;
}

const { title, menuId, count } = defineProps<Props>();

const { companyId } = useF9Context();

const queryData = reactive<EnvironmentalInsuranceF9Params>({
  pageNum: 1,
  pageSize: 10,
  type: 3,
  companyId
});

const { tableData, columns } = useTable();

const { loading, run } = useRequest(getEnvironmentalInsuranceF9, {
  defaultParams: [queryData],
  onSuccess: (res) => {
    totalNum.value = res.total;
    tableData.value = res.values;
  }
});

const { totalNum, handleCurrentChange, sortChange } = usePage(queryData, run);
</script>

<style lang="scss" scoped></style>
